<template>
  <div class="map-echarts">
    <base-echarts :options="option"></base-echarts>
  </div>
</template>

<script setup lang="ts">
import baseEcharts from './base-echarts.vue'
import { computed, ref } from 'vue'
import { coverData } from '../utils/useCoverData'
import type { commonDataType } from '../types'
import type { EChartsOption } from 'echarts'
import mittBus from '@/utils/mittBus'
const props = defineProps<{
  mapData: commonDataType[]
}>()

const mapColor = ref('#fff')
const mapLabel = ref('#333')
mittBus.on('switchMapColor', (switchTre: any) => {
  if (switchTre) {
    mapColor.value = 'var(--el--dark--bg--)'
    mapLabel.value = '#222'
  } else {
    mapColor.value = '#fff'
    mapLabel.value = '#333'
  }
})
const option = computed<EChartsOption>(() => {
  return {
    backgroundColor: mapColor.value,
    title: {
      text: '全国销量统计',
      left: 'center',
      textStyle: {
        color: '#000'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params: any) {
        return params.name + ' : ' + params.value[2]
      }
    },
    label: {
      formatter: '{b}',
      position: 'right',
      show: true,
      color: mapLabel.value
    },
    visualMap: {
      min: 0,
      max: 60000,
      left: 20,
      bottom: 20,
      calculable: true,
      text: ['高', '低'],
      inRange: {
        color: ['rgb(70, 240, 252)', 'rgb(250, 220, 46)', 'rgb(245, 38, 186)']
      },
      textStyle: {
        color: '#fff'
      }
    },
    geo: {
      // 设置使用的地图(注册过的china地址)
      map: 'china',
      // 漫步: 支持鼠标缩放效果
      roam: true,
      emphasis: {
        areaColor: 'red',
        borderColor: 'rgb(9, 54, 95)',
        itemStyle: {
          areaColor: '#f4cccc'
        }
      }
    },
    series: [
      {
        name: '销量',
        // 散点图在地图上展示数据
        type: 'scatter',
        coordinateSystem: 'geo',
        data: coverData(props.mapData),
        // 散点的大小(可以根据数据不同显示不同的大小, 设置为一个函数)
        symbolSize: 12,
        emphasis: {
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
            // scale: true
          }
        }
      },
      {
        // 会自动生成geo地理坐标系统
        type: 'map',
        // 设置使用的地图名称, 复用的是第0个坐标系统
        map: 'china',
        geoIndex: 0,
        // 缩放地图
        aspectScale: 0.75,
        tooltip: {
          show: false
        }
      }
    ]
  }
})
</script>

<style lang="less" scoped>
.map-echarts {
  h2 {
    color: red;
  }
}
</style>
